<template>
    <!-- pages/myincome/makerincome/index.wxml -->
    <view class="pages">
        <view>
            <image class="bgimg" :src="imgUrl + 'maker-bg.png'"></image>
        </view>
        <view class="box1">
            <view class="t-c">
                <text class="money-1">¥</text>
                <text class="money-2">{{ makerObj.totalAmount ? makerObj.totalAmount : 0 }}</text>
            </view>
            <view class="money-3">累计获得收益（元）</view>
        </view>
        <view class="flexbox-sb box2" @tap="onAll">
            <view class="text-1">团队总售卡统计</view>
            <view class="centers">
                <text class="text-2 mr-10">{{ makerObj.teamBuyCount ? makerObj.teamBuyCount : 0 }}张</text>
                <image class="icon-32" :src="imgUrl + 'right.png'"></image>
            </view>
        </view>
        <!-- <view class="flexbox-sb box2 item-line" bindtap="onStoreAll">
    <view class="text-1">门店总售卡统计</view>
    <view class="centers">
      <text class="text-2 mr-10">{{makerObj.storeTotalAmount ? makerObj.storeTotalAmount : 0}}张</text>
      <image class="icon-32" src="{{imgUrl + 'right.png'}}"></image>
    </view>
  </view> -->
        <view class="box3 mt-20">
            <view class="text-3">
                <view>
                    <view>一级</view>
                    <view>{{ makerObj.upOne + makerObj.downOne ? makerObj.upOne + makerObj.downOne : 0 }}</view>
                    <view class="b-r"></view>
                </view>
                <view>
                    <view>购买数量</view>
                    <view>{{ makerObj.upOneBuy + makerObj.downOneBuy ? makerObj.upOneBuy + makerObj.downOneBuy : 0 }}</view>
                    <view class="b-r"></view>
                </view>
                <view>
                    <view>二级</view>
                    <view>{{ makerObj.upTwo + makerObj.downTwo ? makerObj.upTwo + makerObj.downTwo : 0 }}</view>
                    <view class="b-r"></view>
                </view>
                <view>
                    <view>购买数量</view>
                    <view>{{ makerObj.upTwoBuy + makerObj.downTwoBuy ? makerObj.upTwoBuy + makerObj.downTwoBuy : 0 }}</view>
                </view>
            </view>
            <!-- <view class="text-4">
    </view> -->
        </view>
        <view class="centers box5">
            <view class="hx"></view>
            <view class="h-t">售卡详情</view>
            <view class="hx"></view>
        </view>
        <view class="mt-20">
            <view class="box4" @tap="onDetails" :data-id="item.userId" v-for="(item, index) in makerList" :key="index">
                <view class="centers">
                    <view class="text-5 mr-20">{{ item.nickname }}</view>
                    <view class="text-v mr-20" v-if="item.type == 1">用户</view>
                    <view class="text-v mr-20" v-if="item.type == 2">美发师</view>
                    <view class="text-v mr-20" v-if="item.type == 3">门店</view>
                    <view class="text-v" v-if="item.ismaker">创客</view>
                </view>

                <view class="text-t mt-20">邀请时间：{{ item.createtime }}</view>

                <view class="text-t mt-10">推荐创客：一级{{ item.buynumber }}张、二级{{ item.level2buynumber }}张</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/myincome/makerincome/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            makerList: [],
            makerObj: null
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        // 获取购买创客列表 1线上 2线下 整合一起
        _request
            .get('/makerCount/findMakerTeamMembers', {
                userId: uni.getStorageSync('userid'),
                type: 1,
                page: 1
            })
            .then((res) => {
                this.setData({
                    makerList: [...this.makerList, ...res.data.data]
                });
            })
            .catch((error) => {
                console.log(error);
            }); // 获取购买创客列表 1线上 2线下 整合一起

        _request
            .get('/makerCount/findMakerTeamMembers', {
                userId: uni.getStorageSync('userid'),
                type: 2,
                page: 1
            })
            .then((res) => {
                this.setData({
                    makerList: [...this.makerList, ...res.data.data]
                });
            })
            .catch((error) => {
                console.log(error);
            });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取创客收益
        _request
            .get('/makerCount/findMakerBuyCount', {
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    makerObj: res.data.data
                });
            })
            .catch((error) => {
                console.log(error);
            });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 总售卡统计
        onAll() {
            uni.navigateTo({
                url: '/pages/myincome/makerincome/total/index'
            });
        },

        //门店总售卡
        onStoreAll() {
            uni.navigateTo({
                url: '/pages/myincome/makerincome/storetotal/index'
            });
        },

        // 详情
        onDetails(e) {
            const { id } = e.currentTarget.dataset;
            uni.navigateTo({
                url: '/pages/myincome/makerincome/details/index?id=' + id
            });
        }
    }
};
</script>
<style>
/* pages/myincome/makerincome/index.wxss */
.bgimg {
    width: 750rpx;
    height: 200rpx;
}

.box1 {
    width: 710rpx;
    height: 200rpx;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(230, 230, 230, 0.5);
    border-radius: 10rpx;
    padding: 30rpx 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin: 0 20rpx;
    position: relative;
    top: -100rpx;
}

.money-1 {
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
}

.money-2 {
    font-size: 64rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
}

.money-3 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
}

.t-c {
    width: 100%;
    text-align: center;
}

.box2 {
    width: 710rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 4px;
    margin: 0 20rpx;
    align-items: center;
    position: relative;
    top: -80rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.item-line {
    position: relative;
}
.item-line::after {
    position: absolute;
    content: ' ';
    height: 1px;
    background-color: #ededed;
    left: 10px;
    right: 10px;
    top: 0;
}

.text-1 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
}

.text-2 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
}

.text-3 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 88rpx;
    height: 88rpx;
    background: #fff9f4;
    border-radius: 4px 4px 0px 0px;
    display: flex;
}

.text-3 > view {
    padding: 0 46rpx;
    text-align: center;
    position: relative;
}

.b-r {
    width: 2rpx;
    height: 30rpx;
    background-color: #ff8722;
    position: absolute;
    right: 0;
    top: 30rpx;
}

.text-4 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
}

.hx {
    width: 60rpx;
    height: 2rpx;
    background-color: #ff8722;
}

.h-t {
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 50rpx;
    margin: 0 20rpx;
}

.box5 {
    justify-content: center;
}

.text-5 {
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
}

.text-v {
    height: 36rpx;
    background: #ffefe1;
    border-radius: 18rx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
    padding: 0 16rpx;
    text-align: center;
}

.text-t {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.box3 {
    width: 710rpx;
    height: 168rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 8rpx;
    margin: 0 20rpx;
    position: relative;
    top: -60rpx;
}

.box4 {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 4px;
    margin: 0 20rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #ededed;
}
</style>
